<template>
  <div class=''>
    <el-card>
      <div slot="header">
        <my-breadcrumb>粉丝管理</my-breadcrumb>
      </div>
      <!-- tab卡片 -->
      <el-tabs v-model="activeName" type="card" @tab-click="hTabClick">
        <el-tab-pane label="列表" name="list">
          <!-- 列表的内容
          fan.id.toString()防止fan.id是大数
          -->
          <div class="fans_list">
            <div class="fans_item" v-for="fan in fans" :key="fan.id.toString()">
              <!-- 头像组件 https://element.eleme.io/#/zh-CN/component/avatar -->
              <el-avatar :size="80"
              :src="fan.photo"></el-avatar>
              <p>{{fan.name}}</p>
              <el-button type="primary" size="small">+关注</el-button>
            </div>
          </div>

          <!-- 分页 -->
          <el-pagination
            background
            @current-change="hCurrentChange"
            layout="prev, pager, next"
            :page-size="20"
            :total="total_count">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="画像" name="echarts">
        <!-- 下面的dom用来充当echarts画图的容器
              注意： 一定要有宽，高
         -->
           <div id="main" style="width: 600px;height:400px;"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 1.引入echarts
const echarts = require('echarts')
export default {
  name: 'fans',
  data () {
    return {
      activeName: 'list', // tabs标签默认打开哪一个
      fans: [], // 粉丝数据
      page: 1, // 页码
      total_count: 0 // 总页码
    }
  },
  created () {
    this.loadFans()
  },
  methods: {
    hTabClick (obj) {
      // 点击画图标签才开始画图
      if (obj.name === 'echarts') {
        // 去画图
        this.draw()
      }
    },
    // 对后端返回的数据进行加工
    // 目前只对年龄信息进行处理
    // le: 小于
    // gt: 大于
    //     age: {
    //       le18: 90,
    //       le23: 30,
    //       le30: 89,
    //       le40: 45,
    //       le50: 10,
    //       gt50: 11
    //     },
    bulidData (res) {
      const age = res.data.data.age
      // 从对象中取出属性值来组成数组，可以使用Object.Values(对象)
      // Object.Values的功能 取出对象的属性来组成一个数组
      // 格式：数组 = Object.Values(对象)
      const yDate = Object.values(age)
      let xDate = Object.keys(age)
      // xDate = xDate.map(item => { return item.replace('le', '小于').replace('gt', '大于') })
      xDate = xDate.map(item => item.replace('le', '小于').replace('gt', '大于'))
      // console.log('values', yDate)
      // console.log('keys', xDate)
      return {
        yDate,
        xDate
      }
    },
    async draw () {
      // 1、初始化容器
      const abc = echarts.init(document.getElementById('main'))
      // 2.发请求拿数据
      // const res = await this.$axios({
      //   method: 'get',
      //   url: ' /mp/v1_0/statistics/followers'
      // })
      const res = {
        data: {
          message: '',
          data: {
            gender: {
              male: 100,
              female: 130
            },
            age: {
              le18: 90,
              le23: 30,
              le30: 89,
              le40: 45,
              le50: 10,
              gt50: 11
            },
            device: {
              ios: 100,
              android: 90
            }
          }
        }
      }
      // 3.对数据进行加工
      const { yDate, xDate } = this.bulidData(res)
      console.log(yDate, xDate)
      // 4、echart的配置项和要画图的数据
      const option = {
        title: {
          text: 'ECharts 年龄分布'
        },
        tooltip: {},
        xAxis: {
          axisTick: { // 刻度线
            show: false
          },
          data: xDate
          // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar', // 柱状图
          data: yDate
          // data: [5, 20, 36, 10, 10, 20]
        }]
      }
      // 5、画图
      abc.setOption(option)
    },
    // 分页功能
    hCurrentChange (curPage) {
      this.page = curPage
      this.loadFans()
    },
    buildParams () {
      return {
        page: this.page
      }
    },
    async loadFans () {
      const params = this.buildParams()
      try {
        const res = await this.$axios({
          method: 'get',
          url: '/mp/v1_0/followers',
          params
        })
        console.log(res)
        this.total_count = res.data.data.total_count
        this.fans = res.data.data.results
      } catch (err) {
        console.log(err)
        this.$message.error('操作失败')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
